@import '../app/variables';

:root {
  --link-color: var(--color-primary-medium);
  --back-button-color: var(--color-grayscale-dark);
  --nav-line-height: 32px;
  --back-button-width-l: 75px;
  --back-button-width-s: 65px;
  --nav-size: 490px;
}

.navigation {
  height: var(--nav-line-height);
  padding: 0 45px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  position: relative;
  z-index: 9;

  & > section {
    align-self: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: var(--nav-size);
  }

  & .icon,
  & .label,
  & .navEl {
    vertical-align: middle;
    display: inline-block;
    line-height: var(--nav-line-height);
  }

  & .backButton {
    width: var(--back-button-width-l); /* to have equal width with its shadow */
    cursor: pointer;
    color: var(--link-color);
    font-weight: bold;

    & .icon {
      font-size: 32px;
      margin-left: -8px; /* conpensate the icon-font white space */
    }
  }

  & .backButtonShadow {
    width: var(--back-button-width-l);
    display: inline-block;
  }

  & .navEl {
    color: var(--link-color);
    opacity: 0.4;

    &.dash b {
      width: 50px;
      height: 0;
      border-bottom: solid 2px var(--link-color);
      opacity: 0.5;
      font-size: 0 !important;

      & small {
        font-size: 0;
      }
    }

    & .icon {
      font-size: 32px;
      padding: 0 5px;
    }

    &.current {
      opacity: 1;
    }
  }
}

@media (--small-viewport) {
  .navigation {
    counter-reset: section;
    padding: 0 18px;

    & .backButtonShadow {
      display: none;
    }

    & section {
      width: 100px;
    }
  }

  .navEl:not(.dash) {
    & .icon,
    & .label {
      display: none;
    }

    &::after {
      counter-increment: section;
      content: counter(section);
    }

    &.current {
      opacity: 1;

      &::after {
        font-weight: bold;
      }
    }
  }

  .navEl.dash {
    & b {
      width: 20px !important;
    }
  }
}

.hidden {
  display: none;
}
